import React, { Component } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { connect } from 'dva'
import {
  Card,
  Tooltip,
  Button,
  Form,
  Input,
  Select,
  DatePicker,
  Spin,
  Row,
  Col,
  Tabs,
  Pagination,
  Modal,
  Tag
} from 'antd'
import MyPageTable from '@/components/MyPageTable'
import { getParam, onTableData } from '@/utils/utils.js'
import CopyToClipboard from '@/components/CopyToClipboard'
import { getTimeDistance } from '@/utils/utils'
import ExportJsonExcel from "js-export-excel";
import moment from 'moment'
import { orderCloseStatusMap, orderStatusMap } from '@/utils/enum'
// import { p } from 'puppeteer/lib/USKeyboardLayout'

const { Option } = Select
const { RangePicker } = DatePicker
const { TabPane } = Tabs
const { TextArea } = Input

@connect(({ order, loading }) => ({
  ...order,
  loading: loading.effects['order/queryOrderByConditionExt']
}))
@Form.create()
export default class HomePage extends Component {
  state = {
    current: 1,
    pageSize: 10,
    visible: '',
    orderId: null,
    datas: {},
    record: {},
    expressList: [],
    yunTime: getTimeDistance('month'),
    gBtusua: '', // 默认状态: 全部
    remarkVisible: false,
    orderVisible: false,
    remarkId: '',
    remarkList: [],
    finishedOrderVisible: false,
    finishedOrderId: '',
    antchainVisible: false,
    antChainData: [],
    insuranceVisible: false,
    insuranceData: '',
    quitLeaseOrderId: '',
    quitLeaseVisible: false
  }

  columns = [
    {
      title: '订单编号',
      dataIndex: 'orderId',
      width: 160,
      render: orderId => <CopyToClipboard text={orderId} />
    },
    {
      title: '渠道来源',
      dataIndex: 'channelName',
      width: 120
    },
    {
      title: '商品名称',
      dataIndex: 'productName',
      width: 160 // ellipsis: true,
    },
    {
      title: '已支付期数/总期数',
      width: 110,
      render: e => {
        return (
          <>
            <Tooltip placement="top" title={e.currentPeriods}>
              <div
                style={{
                  width: 60
                }}
              >
                {e.payedPeriods}/{e.totalPeriods}
              </div>
            </Tooltip>
          </>
        )
      }
    },
    {
      title: '总租金',
      width: 90,
      render: e => {
        return <>{e.totalRentAmount}</>
      }
    },
    {
      title: '已付租金',
      width: 90,
      render: e => {
        return <>{e.payedRentAmount}</>
      }
    },
    {
      title: '下单人姓名',
      width: 120,
      render: e => {
        return <>{e.realName}</>
      }
    },
    {
      title: '下单人手机号',
      width: 120,
      render: e => {
        return <>{e.telephone}</>
      }
    },
    {
      title: '下单时间',
      dataIndex: 'placeOrderTime',
      width: 120
    },
    {
      title: '收货人手机号',
      width: '120px',
      render: e => {
        return <>{e.addressUserPhone}</>
      }
    },
    {
      title: '起租时间',
      width: '120px',
      render: e => {
        return <>{e.rentStart}</>
      }
    },
    {
      title: '归还时间',
      width: '120px',
      render: e => {
        return <>{e.unrentTime}</>
      }
    },
    {
      title: '订单状态',
      dataIndex: 'status',
      width: 120,
      render: (text, record) => {
        if (text === '10') {
          return (
            <span>
              {orderStatusMap[text]}({orderCloseStatusMap[record.closeType]})
            </span>
          )
        }
        return <span>{record.status}</span>
      }
    },
    {
      title: '操作',
      width: 120,
      fixed: 'right',
      align: 'center',
      render: (e, record) => {
        return (
          <div>
            <a
              className="primary-color"
              // onClick={() => router.push(`/Order/Details?id=${e.orderId}`)}
              href={`#/Order/HomePage/Details?id=${e.orderId}`}
              // target="_blank"
            >
              处理
            </a>
          </div>
        )
      }
    }
  ]

  // tab数据组合
  tabsData = [
    {
      title: '全部',
      key: '0',
      code: '99',
      count: 0
    },
    {
      title: '待支付',
      key: '1',
      code: '16',
      count: 0
    },
    {
      title: '待签约',
      key: '17',
      code: '17',
      count: 0
    },
    {
      title: '待审批',
      key: '2',
      code: '11',
      count: 0
    },
    {
      title: '待发货',
      key: '3',
      code: '04',
      count: 0
    },
    {
      title: '待确认收货',
      key: '4',
      code: '05',
      count: 0
    },
    {
      title: '租用中',
      key: '5',
      code: '06',
      count: 0
    },
    {
      title: '待结算',
      key: '6',
      code: '07',
      count: 0
    },
    {
      title: '结算待支付',
      key: '7',
      code: '08',
      count: 0
    },
    {
      title: '待归还',
      key: '8',
      code: '12',
      count: 0
    },
    {
      title: '订单完成',
      key: '9',
      code: '09',
      count: 0
    },
    {
      title: '交易关闭',
      key: '10',
      code: '10',
      count: 0
    }
  ]

  // tab配置参数
  tabState = {
    activeKey: this.tabsData[0].key,
    panes: this.tabsData
  }

  // 上链类型枚举
  chainType = {
    product: '商品信息上链',
    user: '用户信息上链',
    order: '订单信息上链',
    orderProduct: '订单商品信息上链',
    logistic: '物流信息上链',
    leasePromise: '承诺信息上链',
    insurance: '投保信息',
    rental: '履约信息'
  }

  componentDidMount() {
    const { status } = this.props.location.query
    if (status) {
      this.setState(
        {
          gBtusua: status
        },
        () => {
          this.props.form.setFieldsValue({
            status
          })
          this.onList(1, 10)
          // this.getExpressList();
        }
      )
    } else {
      this.onList(1, 10)
      // this.getExpressList();
    }

    this.props.dispatch({
      type: 'order/PlateformChannel'
    })
  }

  onList = (pageNumber, pageSize, data = {}) => {
    const { dispatch } = this.props
    const { gBtusua } = this.state

    // dispatch({
    //   type: 'order/queryOpeOrderByConditionList', // type: 'order/queryOrderByConditionExt',
    //   payload: {
    //     pageSize, pageNumber, ...data,
    //   },
    // });

    // if (data.status === '99' || !data.status) {
    //   data.status = [];
    // } else if (data.status === '11') {
    //   data.status = ['11', '13'];
    // } else {
    //   data.status = [data.status];
    // }
    if (gBtusua === '99' || !gBtusua || gBtusua === '88' ) {
      data.status = []
    } else if (gBtusua === '11') {
      data.status = ['11', '13','15']
    } else if (gBtusua === '16') {
      data.status = ['16', '18']
    } else {
      data.status = [gBtusua]
    }

    this.setState({
      current: pageNumber
    })

    dispatch({
      type: 'order/queryOrderByConditionExt',
      payload: {
        pageSize,
        pageNumber,
        ...data
      },
    })
    dispatch({
      type: 'order/queryOrderGroupCountByCondition',
      payload: {
        pageSize: 10,
        pageNumber: 1,
        ...data
      }
    })
  }

  // 重置
  handleReset = e => {
    this.setState({
      current: 1,
      pageSize: 10,
    }, () => {
      this.props.form.resetFields()
      this.handleSubmit(e)
    },);
  }

  handleSubmit = e => {
    e && e.preventDefault()
    this.props.form.validateFields((err, values) => {
      console.log('Received values of form: ', values)
      if (values.createDate && values.createDate.length < 1) {
        values.createTimeStart = ''
        values.createTimeEnd = ''
        this.setState(
          {
            datas: { ...values }
          },
          () => {
            this.onList(1, 10, { ...values })
          }
        )
      } else if (values.createDate) {
        values.createTimeStart = moment(values.createDate[0]).format(
          'YYYY-MM-DD HH:mm:ss'
        )
        values.createTimeEnd = moment(values.createDate[1]).format(
          'YYYY-MM-DD HH:mm:ss'
        )
        this.setState(
          {
            datas: { ...values }
          },
          () => {
            this.onList(1, 10, { ...values })
          }
        )
      } else {
        this.setState(
          {
            datas: { ...values }
          },
          () => {
            this.onList(1, 10, { ...values })
          }
        )
      }
    })
  }

  onexport = () => {
    const {
      allListExt,
    } = this.props
    let arr = [];
    allListExt.map(item => {
      let remark = '';
      item.orderRemarkDtoList.map( obj => {
        remark += obj.remark + ' | '
      })
        arr.push({
          my_orderId: item.orderId,
          my_userName: item.userName,
          my_phone: item.userOrderInfoDto.telephone,
          my_idCard: item.userOrderInfoDto.idCard,
          my_status: item.status,
          my_remark: remark
        })
    })
    let sheetFilter = ['my_orderId', 'my_userName', 'my_phone', 'my_idCard', 'my_status', 'my_remark']
    let option = {
        fileName: '订单拒绝原因列表', // 导出默认文件名
        datas: [
            {
                sheetData: arr, // 保存至表格的数据
                sheetFilter: sheetFilter,
                sheetHeader: ['订单号', '姓名','手机号','身份证','订单状态', '备注'], // 表格-表头
                columnWidths: ['10', '6', '10','10','8','20'], // 单元格宽度
            },
        ]
    }
    var toExcel = new ExportJsonExcel(option) // 创建新的模板
    toExcel.saveExcel() 
    // const { yunTime } = this.state
    // if (this.props.form.getFieldValue('createDate')) {
    //   this.props.dispatch({
    //     type: 'order/exportOpeAllUserOrders',
    //     payload: {
    //       createTimeEnd: moment(
    //         this.props.form.getFieldValue('createDate')[1]
    //       ).format('YYYY-MM-DD HH:mm:ss'),
    //       createTimeStart: moment(
    //         this.props.form.getFieldValue('createDate')[0]
    //       ).format('YYYY-MM-DD HH:mm:ss')
    //     }
    //   })
    // } else {
    //   this.props.dispatch({
    //     type: 'order/exportOpeAllUserOrders',
    //     payload: {
    //       createTimeEnd: moment(yunTime[1]).format('YYYY-MM-DD HH:mm:ss'),
    //       createTimeStart: moment(yunTime[0]).format('YYYY-MM-DD HH:mm:ss')
    //     }
    //   })
    // }
  }

  handleCancel = e => {
    this.setState({
      visible: ''
    })
  }

  // table 页数
  onPage = e => {
    this.setState(
      {
        current: e
      },
      () => {
        const params = {
          ...this.state.datas
        }
        this.onList(e, this.state.pageSize, params)
      }
    )
  }

    // table 页数
  onSizeChange = (current, pageSize) => {
      this.setState(
        {
          current: current,
          pageSize: pageSize
        },
        () => {
          const params = {
            ...this.state.datas
          }
          this.onList(current, pageSize, params)
        }
      )
    }

  tabClick = activeKey => {
    const params = {
      ...this.state.datas
    }
    let status = '99'
    this.tabsData.map(val => {
      if (val.key === activeKey) {
        status = val.code
      }
    })

    if (status === '99') {
      status = ''
    }

    this.setState(
      {
        gBtusua: status
      },
      () => {
       // this.props.form.resetFields()
        this.onList(1, 10, params)
      }
    )
  }

  showOrderModal = (type, id) => {
    this.setState({
      remarkId: id,
      orderVisible: type
    })
  }

  showRemarkListModal = (type, obj) => {
    this.setState({
      remarkList: obj,
      orderVisible: type
    })
  }

  remarkCancel = e => {
    this.setState({
      remarkVisible: false,
      orderVisible: false
    })
    this.props.form.resetFields(['beizhu'])
  }

  // 打开蚂蚁链信息模态框
  showAntchainModal = orderId => {
    const { dispatch } = this.props
    dispatch({
      type: 'order/getChainInfoByOrderId',
      payload: {
        orderId: orderId
      },
      callback: res => {
        let resData = res.data
        resData.map(val => {
          let chainStr = ''
          if (val.content) {
            val.content = JSON.parse(val.content)
          }
          if (val.recordType === 'product') {
            chainStr += `【商品Id】：${val.content.productId}；`
            chainStr += `【商品品牌】：${val.content.productBrand}；`
            chainStr += `【商品信息】：${val.content.productDetailInfo}；`
            chainStr += `【商品价格】：${val.content.productPrice / 10000}元；`
            // chainStr += `【押金金额】：${val.content.depositPrice / 10000}元。`
          }
          if (val.recordType === 'user') {
            chainStr += `【用户名称】：${val.content.userName}；`
            chainStr += `【用户手机】：${val.content.userPhoneNumber}；`
            chainStr += `【用户身份证】：${val.content.userId}。`
          }
          if (val.recordType === 'order') {
            chainStr += `【订单Id】：${val.content.orderId}；`
            chainStr += `【订单创建时间】：${val.content.orderCreateTime}；`
            chainStr += `【订单支付时间】：${val.content.orderPayTime}；`
            chainStr += `【订单支付Id】：${val.content.orderPayId}；`
            chainStr += `【订单支付类型】：预授权；`
            // chainStr += `【免押金额】：${val.content.depositFree / 10000}元；`
            chainStr += `【实际授权金额】：${val.content.acutalPreAuthFree /
              10000}元；`
            chainStr += `【租期】：${val.content.rentTerm}；`
            chainStr += `【月租金】：${val.content.rentPricePerMonth /
              10000}元；`
            chainStr += `【到期买断价】：${val.content.buyOutPrice / 10000}元；`
            chainStr += `【租赁合同地址】：${val.content.leaseContractUrl}；`
            chainStr += `【收货地址】：${val.content.userAddress}；`
            chainStr += `【租金总额】：${val.content.totalRentMoney /
              10000}元；`
            chainStr += `【蚁盾分】：${val.content.yidunScore}。`
          }
          if (val.recordType === 'orderProduct') {
            chainStr += `【商品Id】：${val.content.productInfo[0].productId}；`
            chainStr += `【商品名称】：${val.content.productInfo[0].productName}；`
            chainStr += `【商品价格】：${val.content.productInfo[0]
              .productPrice / 10000}元。`
          }
          if (val.recordType === 'logistic') {
            chainStr += `【物流名称】：${val.content.logisticCompanyName}；`
            chainStr += `【物流单号】：${val.content.logisticsOrderId}；`
            chainStr += `【物流时间】：${val.content.deliverTime}；`
            chainStr += `【物流状态】：${
              val.content.logisticStatus === 1
                ? '已发货'
                : val.content.logisticStatus === 2
                ? '运输中'
                : val.content.logisticStatus === 3
                ? '已签收'
                : '其他'
            }。`
          }
          if (val.recordType === 'leasePromise') {
            chainStr += `分期账单列表：`
            for (let i = 0; i < val.content.payDateList.length; i++) {
              chainStr += `【${i + 1}期】${val.content.payDateList[i].substr(
                0,
                10
              )} -> ${val.content.payMoneyList[i] / 10000}元；`
            }
          }
          if (val.recordType === 'insurance') {
            if (val.content) {
              chainStr += `【投保状态】：投保成功;`
              chainStr += `【保单号】：${val.content.policyNo};`
              chainStr += `【保险开始时间】：${val.content.insuranceStartTime};`
              chainStr += `【保险结束时间】：${val.content.insuranceEndTime};`
              chainStr += `【投保时间】：${val.content.insureDate};`
              chainStr += `【保费】：${val.content.premium / 100}元;`
              chainStr += `【保险缴费单号】：${val.content.exchangeNo};`
              chainStr += `【保单下载地址】：${val.content.policyUrl}`
              chainStr += `【保单存证上链地址】：${val.content.txHash}。`
            } else {
              chainStr += `【投保状态】：投保失败;`
              chainStr += `【投保结果】：${val.contentError}。`
            }
          }
          if (val.recordType === 'rental') {
            chainStr += `【租期期数】：${val.content.leaseTermIndex} ;`
            chainStr += `【归还金额】：${val.content.rentalMoney / 10000}元;`
            chainStr += `【归还时间】：${val.content.returnTime};`
          }
          val['chainStr'] = chainStr
          return val
        })
        this.setState({
          antChainData: resData.reverse(),
          antchainVisible: true
        })
      }
    })
  }

  // 关闭蚂蚁信息模态框
  antchainCancel = e => {
    this.setState({
      antchainVisible: false
    })
  }

  // 打开投保信息模态框
  showInsuranceModal = orderId => {
    const { dispatch } = this.props
    dispatch({
      type: 'order/getChainInfoByOrderId',
      payload: {
        orderId: orderId
      },
      callback: res => {
        let resData = res.data.reverse()
        let tmpInsuranceData = ''
        for (let i = 0; i < resData.length; i++) {
          if (resData[i].recordType === 'insurance') {
            if (resData[i].content) {
              resData[i].content = JSON.parse(
                resData[i].content.replace(/[\\]/g, '')
              )
              tmpInsuranceData = resData[i].content
              break
            }
          }
        }
        this.setState({
          insuranceData: tmpInsuranceData,
          insuranceVisible: true
        })
      }
    })
  }

  // 关闭投保信息模态框
  insuranceCancel = e => {
    this.setState({
      insuranceVisible: false
    })
  }

  // 备注
  renderRemarkModal() {
    const { orderVisible } = this.state
    const { getFieldDecorator } = this.props.form
    const orderId = this.state.remarkId
    const handleOk = e => {
      e.preventDefault()
      this.props.form.validateFields(['beizhu'], (err, values) => {
        if (!err) {
          const { dispatch } = this.props
          dispatch({
            type: 'order/orderRemark',
            payload: {
              orderId,
              remark: values.beizhu,
              orderType: '01'
            },
            callback: res => {
              this.remarkCancel()
              this.onList(this.state.current, 10)
            }
          })
        }
      })
    }

    return (
      <div>
        <Modal
          title="备注"
          visible={orderVisible === 'remark'}
          onOk={handleOk}
          onCancel={this.remarkCancel}
        >
          <Form>
            <Form.Item label="备注内容">
              {getFieldDecorator('beizhu', {
                rules: [{ required: true, message: '请输入备注' }]
              })(<TextArea rows="5" placeholder="请输入" />)}
            </Form.Item>
          </Form>
        </Modal>
      </div>
    )
  }

  // 备注列表
  renderRemarkListModal() {
    const { orderVisible } = this.state

    return (
      <div>
        <Modal
          title="备注详情"
          width="50%"
          bodyStyle={{ maxHeight: '450px', overflowY: 'scroll' }}
          visible={orderVisible === 'remarkList'}
          onCancel={this.remarkCancel}
          footer={[
            <Button key="back" onClick={this.remarkCancel}>
              关闭
            </Button>
          ]}
        >
          {this.state.remarkList.length > 0 ? (
            this.state.remarkList.map(item => (
              <p>
                {item.createTime}
                &emsp;<span style={{ color: '#999999' }}>备注内容：</span>
                <span style={{ borderBottom: '1px dashed #999' }}>
                  {item.remark}
                </span>
                &emsp;<span style={{ color: '#999999' }}>备注人：</span>
                <span style={{ borderBottom: '1px dashed #999' }}>
                  {item.userName}
                </span>
                &emsp;【{item.source === '02' ? '商家备注' : '平台备注'}】
              </p>
            ))
          ) : (
            <p>暂无备注</p>
          )}
        </Modal>
      </div>
    )
  }

  // 蚂蚁链信息
  renderAntChainModal() {
    const { antchainVisible } = this.state

    return (
      <div>
        <Modal
          title="蚂蚁链上链信息"
          width="50%"
          bodyStyle={{ maxHeight: '450px', overflowY: 'scroll' }}
          visible={antchainVisible}
          onCancel={this.antchainCancel}
          footer={[
            <Button key="back" onClick={this.antchainCancel}>
              关闭
            </Button>
          ]}
        >
          {this.state.antChainData.length > 0 ? (
            this.state.antChainData.map((item, index, arr) => (
              <p style={{ borderBottom: '1px dashed #389e0d' }}>
                <span style={{ color: '#389e0d' }}>{arr.length - index}. </span>
                <span style={{ color: '#999999' }}>上链类型：</span>
                {this.chainType[item.recordType]}
                <br />
                &emsp;<span style={{ color: '#999999' }}>上链时间：</span>
                <span style={{ borderBottom: '1px dashed #999' }}>
                  {item.createTime}
                </span>
                <br />
                &emsp;<span style={{ color: '#999999' }}>上链内容：</span>
                <span>{item.chainStr}</span>
              </p>
            ))
          ) : (
            <p>暂无上链信息</p>
          )}
        </Modal>
      </div>
    )
  }

  // 投保信息
  renderInsuranceModal() {
    const { insuranceVisible } = this.state

    return (
      <div>
        <Modal
          title="投保信息"
          width="55%"
          visible={insuranceVisible}
          onCancel={this.insuranceCancel}
          footer={[
            <Button key="back" onClick={this.insuranceCancel}>
              关闭
            </Button>
          ]}
        >
          <p>【投保单号】：{this.state.insuranceData.policyNo}</p>
          <p>【保险开始时间】：{this.state.insuranceData.insuranceStartTime}</p>
          <p>【保险结束时间】：{this.state.insuranceData.insuranceEndTime}</p>
          <p>【投保时间】：{this.state.insuranceData.insureDate}</p>
          <p>【投保费用】：{this.state.insuranceData.premium / 100}元</p>
          <p>【保险缴费单号】：{this.state.insuranceData.exchangeNo}</p>
          <p>
            【保单下载地址】：{' '}
            <a target="_blank" href={this.state.insuranceData.policyUrl}>
              点击下载电子保单
            </a>
          </p>
          <p>【保单存证上链地址】：{this.state.insuranceData.txHash}</p>
        </Modal>
      </div>
    )
  }

  // 完结订单
  closeOrder = () => {
    const { dispatch } = this.props
    const { finishedOrderId } = this.state
    dispatch({
      type: 'order/comleteOrder',
      payload: {
        orderId: finishedOrderId
      },
    })
    this.finishedOrderCancel()
    this.handleSubmit()
    // 完结订单之后，刷新顶部所有订单状态的数量
    setTimeout(() => {
      dispatch({
        type: 'order/queryOrderGroupCountByCondition',
        payload: {
          pageSize: 10,
          pageNumber: 1
        }
      })
    }, 1500)
  }

  showFinishedOrderModal = id => {
    this.setState({
      finishedOrderId: id,
      finishedOrderVisible: true
    })
  }

  finishedOrderCancel = e => {
    this.setState({
      finishedOrderId: '',
      finishedOrderVisible: false
    })
  }

  // 完结订单模态框
  finishedOrderModal() {
    const { finishedOrderVisible } = this.state

    return (
      <div>
        <Modal
          title="交易完成"
          visible={finishedOrderVisible}
          onOk={this.closeOrder}
          onCancel={this.finishedOrderCancel}
        >
          <p
            style={{ textAlign: 'center', fontSize: '18px', color: '#F5222D' }}
          >
            请确认商品已归还并收到货再执行此操作！
          </p>
        </Modal>
      </div>
    )
  }

  // 退租
  quitLeaseOrder = () => {
    const { dispatch } = this.props
    const { quitLeaseOrderId } = this.state
    dispatch({
      type: 'order/quitLease',
      payload: {
        orderId: quitLeaseOrderId
      },
      callback: res => {
        console.log(res)
      }
    })
    this.QuitLeaseOrderCancel()
    this.handleSubmit()
  }

  showQuitLeaseOrderModal = id => {
    this.setState({
      quitLeaseOrderId: id,
      quitLeaseVisible: true
    })
  }

  QuitLeaseOrderCancel = id => {
    this.setState({
      quitLeaseOrderId: '',
      quitLeaseVisible: false
    })
  }

  // 退租模态框
  quitLeaseOrderModal() {
    const { quitLeaseVisible } = this.state

    return (
      <div>
        <Modal
          title="退租"
          visible={quitLeaseVisible}
          onOk={this.quitLeaseOrder}
          onCancel={this.QuitLeaseOrderCancel}
        >
          <p
            style={{ textAlign: 'center', fontSize: '18px', color: '#FA541C' }}
          >
            请确认商品已归还并收到货再执行此操作！
          </p>
        </Modal>
      </div>
    )
  }

  // 检查是否存在逾期订单
  overdueCheck = e => {
    let isOverdue = false
    for (const value of e) {
      if (value.status == 4) {
        isOverdue = true
        break
      }
    }
    return isOverdue
  }

  render() {
    const {
      allList,
      allTotal,
      allListCount,
      allListExt,
      allTotalExt,
      loading,
      form
    } = this.props
    const { gBtusua } = this.state
    let _total = 0
    allListCount.map(val => {
      _total += val.count
    })
    this.tabsData[0].count = _total
    this.tabsData.map(val => {
      allListCount.map(v => {
        if (v.code === val.code) {
          val.count = v.count
        }
      })
    })

    const a = this.tabsData.find(item => item.code === '11')
    if (allListCount.length) {
      const count1 = allListCount.find(item => item.code === '11').count
      const count2 = allListCount.find(item => item.code === '13').count
      const count3 = allListCount.find(item => item.code === '15').count
      a.count = count1 + count2 + count3
    }

    const b = this.tabsData.find(item => item.code === '16')
    if (allListCount.length) {
      const count1 = allListCount.find(item => item.code === '16').count
      const count2 = allListCount.find(item => item.code === '18').count
      b.count = count1 + count2
    }


    // const paginationProps = {
    //   current: this.state.current,
    //   pageSize: this.state.pageSize,
    //   pageSizeOptions: [10,50,999],
    //   total: allTotalExt,
    //   showTotal: total => (
    //     <span style={{ fontSize: '14px' }}>
    //       <span>共{Math.ceil(total / 10)}页</span>&emsp;
    //       <span>共{total}条</span>
    //     </span>
    //   )
    // }
    const { getFieldDecorator } = form
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      }
    }
    return (
      <PageHeaderWrapper>
        {this.renderRemarkModal()}
        {this.renderRemarkListModal()}
        {this.renderAntChainModal()}
        {this.finishedOrderModal()}
        {this.quitLeaseOrderModal()}
        {this.renderInsuranceModal()}
        <Card bordered={false}>
          <Form
            style={{ paddingBottom: '30px' }}
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
            layout="inline"
            onSubmit={this.handleSubmit}
          >
            <Row>
              <Col span={8}>
                <Form.Item label="商品名称">
                  {getFieldDecorator(
                    'productName',
                    {}
                  )(<Input allowClear placeholder="请输入商品名称" />)}
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="下单人姓名">
                  {getFieldDecorator(
                    'userName',
                    {}
                  )(<Input allowClear placeholder="请输入下单人姓名" />)}
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="下单人手机号">
                  {getFieldDecorator(
                    'telephone',
                    {}
                  )(<Input allowClear placeholder="请输入下单人手机号" />)}
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span={8}>
                <Form.Item label="收货人手机">
                  {getFieldDecorator(
                    'addressUserPhone',
                    {}
                  )(<Input allowClear placeholder="请输入收货人手机号" />)}
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="下单人身份证">
                  {getFieldDecorator(
                    'idCard',
                    {}
                  )(<Input allowClear placeholder="请输入下单人身份证号" />)}
                </Form.Item>
              </Col>
              <Col span={8}>
                {' '}
                <Form.Item label="订单编号">
                  {getFieldDecorator(
                    'orderId',
                    {}
                  )(<Input allowClear placeholder="请输入订单编号" />)}
                </Form.Item>
              </Col>
            </Row>

            <Row>
              <Col span={8}>
                <Form.Item
                  labelCol={{ span: 6 }}
                  wrapperCol={{ span: 18 }}
                  label="创建时间"
                >
                  {getFieldDecorator('createDate', {})(<RangePicker />)}
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="渠道来源">
                  {getFieldDecorator(
                    'platform',
                    {}
                  )(<Input allowClear placeholder="请输入渠道来源" />)}
                </Form.Item>
              </Col>
              <Col span={8}>
               <Form.Item label="前置风控结果">
                {getFieldDecorator('queryAssetRiskRes', {
                 })(
                <Select
                  placeholder="请选择前置风控结果"
                  allowClear
                  style={{ width: 180 }}
                >
                  <Option value={1}>
                    通过
                  </Option>
                  <Option value={0}>
                    拒绝
                  </Option>
                  <Option value={2}>
                    处理中
                  </Option>
                  <Option value={3}>
                    送审中
                  </Option>
                  <Option value={9}>
                  未芝麻免押授权
                </Option>
                  <Option value={-1}>
                    交易不存在
                  </Option>
                </Select>
              )}
                </Form.Item>
              </Col>
              <div>
                <Form.Item>
                  <Button type="primary" htmlType="submit">
                    查询
                  </Button>
                </Form.Item>
                <Form.Item>
                  <Button htmlType="button" onClick={this.handleReset}>
                    重置
                  </Button>
                </Form.Item>
                <Form.Item>
                <Button onClick={this.onexport}>导出</Button>
               </Form.Item>
              </div>
            </Row>

            {/* <Form.Item label="订单状态">
              {getFieldDecorator('status', {
                // initialValue: '',
              })(
                <Select
                  placeholder="订单状态"
                  allowClear
                  style={{ width: 180 }}
                  onChange={this.onChanges}
                >
                  {['01', '11', '04', '05', '06', '07', '08', '09', '10'].map(value => {
                    return (
                      <Option value={value.toString()} key={value.toString()}>
                        {orderStatusMap[value.toString()]}
                      </Option>
                    );
                  })}
                </Select>,
              )}
            </Form.Item> */}
            {/* {this.state.gBtusua === '10' ? ( */}
            {/*  <Form.Item label="关单类型"> */}
            {/*    {getFieldDecorator( */}
            {/*      'closeType', */}
            {/*      {}, */}
            {/*    )( */}
            {/*      <Select placeholder="关单类型" allowClear style={{ width: 180 }}> */}
            {/*        {orderCloseStatusMap.map(value => { */}
            {/*          return ( */}
            {/*            <Option value={value.value} key={value.value}> */}
            {/*              {value.content} */}
            {/*            </Option> */}
            {/*          ); */}
            {/*        })} */}
            {/*      </Select>, */}
            {/*    )} */}
            {/*  </Form.Item> */}
            {/* ) : null} */}
          </Form>
          {/* 状态控制栏 */}
          <Tabs
            defaultActiveKey={this.tabState.activeKey}
            onTabClick={this.tabClick}
            type="card"
          >
            {this.tabState.panes.map(pane => (
              <TabPane tab={`${pane.title}(${pane.count})`} key={pane.key} />
            ))}
          </Tabs>
          <Spin spinning={loading}>
            {/* 订单列表 */}
            {allListExt.map(item => {
              return (
                <div>
                  <Row style={{ border: '1px solid #e8e8e8' }}>
                    {/* <Row
                      style={{
                        fontSize: '10px',
                        padding: '5px',
                        backgroundColor: '#d6fad2'
                      }}
                    >
                      <Col span={16}>
                        店铺名称 ：{item.shopInfoDto.shopName}
                        &emsp;&emsp; 联系电话：{item.shopInfoDto.telephone}
                      </Col>
                    </Row> */}
                    <Row
                      style={{
                        fontSize: '10px',
                        backgroundColor: '#e8e8e8',
                        padding: '5px'
                      }}
                    >
                      <Col span={16}>
                        订单编号 ：
                        <a
                          className="primary-color"
                          // onClick={() => router.push(`/Order/Details?id=${e.orderId}`)}
                          href={`#/Order/HomePage/Details?id=${item.orderId}`}
                          target="_blank"
                        >
                          {item.orderId}
                        </a>
                        &emsp; 下单时间：{item.userOrderInfoDto.createTime}
                        {/* &emsp; 物流信息：
                        {item.receiptExpressInfo
                          ? `${item.receiptExpressInfo.expressNo}【${item.receiptExpressInfo.expressCompany}】`
                          : `无`} */}
                        &emsp;
                        {/* &emsp;&emsp; */}
                        {/* 店铺：{item.shopInfoDto.shopName} */}
                        {item.userOrderInfoDto.status == '13' && (
                          <span
                            style={{
                              color: '#fff',
                              backgroundColor: 'red',
                              boxSizing: 'border-box',
                              padding: '2px',
                              borderRadius: '4px',
                              marginLeft: '15px'
                            }}
                          >
                            申请取消中
                          </span>
                        )}
                      </Col>
                      {/* <Col span={8} style={{ textAlign: 'right' }}>
                        {item.auditor && (
                          <Tag color="cyan">审核：{item.auditor}</Tag>
                        )}
                      </Col> */}
                    </Row>
                    <Row style={{ padding: '5px' }}>
                      <Col span={10}>
                        <Row>
                          <Col span={6} style={{ textAlign: 'center' }}>
                            <img
                              style={{ width: '60px' }}
                              src={item.productInfo.imageUrl}
                              alt={item.productInfo.productName}
                            />
                          </Col>
                          <Col span={18}>
                            <Row>
                              <Col span={24}>
                                <span className="green-status">
                                  {item.productInfo.productName}
                                </span>
                              </Col>
                              <Col
                                span={24}
                                style={{ color: '#999', fontSize: '12px' }}
                              >
                                规格数量：【{item.productInfo.spec}】X
                                {item.productInfo.num}
                              </Col>
                              {/*<Col span={24} style={{ color: "#999", fontSize: "12px" }}>*/}
                              {/*  市场价格：{item.productInfo.marketPrice}元*/}
                              {/*</Col>*/}
                              {/*<Col span={24} style={{ color: "#999", fontSize: "12px" }}>*/}
                              {/*  销售价格：{item.productInfo.salePrice}元*/}
                              {/*</Col>*/}
                              {/*<Col span={24} style={{ color: "#999" }}>*/}
                              {/*  可买断：{item.productInfo.buyOutSupport ? `是` : `否`}*/}
                              {/*</Col>*/}
                            </Row>
                            <Row
                              style={{
                                borderTop: '1px dashed #e8e8e8',
                                paddingTop: '5px',
                                marginTop: '5px'
                              }}
                            >
                              <Col
                                span={24}
                                style={{ color: '#999', fontSize: '12px' }}
                              >
                                租用天数：{item.rentDuration}天
                              </Col>
                              <Col
                                span={24}
                                style={{
                                  color: '#999',
                                  fontSize: '12px',
                                  display: !item.rentStart ? 'none' : 'inline'
                                }}
                              >
                                起租时间：{item.rentStart}
                              </Col>
                              <Col
                                span={24}
                                style={{
                                  color: '#999',
                                  fontSize: '12px',
                                  display: !item.rentStart ? 'none' : 'inline'
                                }}
                              >
                                归还时间：{item.unrentTime}
                              </Col>
                            </Row>
                          </Col>
                        </Row>
                      </Col>
                      <Col span={7} style={{ paddingLeft: '20px' }}>
                        <Col span={24}>
                          总租金：
                          <span style={{ color: 'blue' }}>
                            {item.backstageUserOrderDto.totalRentAmount}元
                          </span>
                        </Col>
                        <Col span={24}>
                          总期数：
                          <span style={{ color: 'blue' }}>
                            {item.backstageUserOrderDto.totalPeriods}期
                          </span>
                        </Col>
                        {/* <Col span={24}>
                      总押金：<span style={{ color: "blue" }}>{item.userOrderCashesDto.totalDeposit}元</span>
                    </Col> */}
                        {/* {['01', '10'].includes(item.backstageUserOrderDto.status) ? (<Col span={24}>
                      实付押金/信用减免：<span style={{ color: "blue" }}>0元/0元</span>
                    </Col>) : (<Col span={24}>
                      实付押金/信用减免：<span
                      style={{ color: "blue" }}>{(item.userOrderCashesDto.freezePrice - item.userOrderCashesDto.creditDeposit).toFixed(2)}元/{item.userOrderCashesDto.creditDeposit}元</span>
                    </Col>)} */}
                        {/* <Col span={24}>
                          首尾租金：
                          <span style={{ color: 'blue' }}>
                            {item.orderByStagesDtoList[0].currentPeriodsRent}元/
                            {
                              item.orderByStagesDtoList[
                                item.orderByStagesDtoList.length - 1
                              ].currentPeriodsRent
                            }
                            元
                          </span>
                        </Col> */}
                         <Col span={24}>
                          已支付租金：
                          <span style={{ color: 'red' }}>
                            {item.backstageUserOrderDto.payedRentAmount}元
                          </span>
                        </Col>
                        <Col span={24}>
                          已支付期数：
                          <span style={{ color: 'red' }}>
                            {item.backstageUserOrderDto.payedPeriods}期
                          </span>
                        </Col>
                        {/*<Col span={24}>*/}
                        {/*  买断金额(预估)：<span*/}
                        {/*  style={{ color: "red" }}>{(item.productInfo.salePrice - item.backstageUserOrderDto.payedRentAmount) < 0 ? 0 : item.productInfo.salePrice - item.backstageUserOrderDto.payedRentAmount}元</span>*/}
                        {/*</Col>*/}
                        <Col span={24}>
                          买断金额：
                          <span style={{ color: 'red' }}>
                            {item.productInfo.salePrice}元
                          </span>
                        </Col>
                      </Col>
                      <Col span={7}>
                      {item.userOrderInfoDto.hasBrokenConfig ? (
                          <Col span={24}>
                            碎屏险：
                            <span style={{ color: 'blue' }}>
                              {item.userOrderInfoDto.brokenAmount}元
                            </span>
                          </Col>
                        ) : null}
                        <Col span={24}>
                          订单状态：
                          <span className="yellow-status">
                            {orderStatusMap[item.backstageUserOrderDto.status]}
                          </span>
                          {/* &emsp;
                          {gBtusua === '06' &&
                          this.overdueCheck(item.orderByStagesDtoList) ? (
                            <Tag color="#f50">有逾期</Tag>
                          ) : null} */}
                        </Col>
                        {item.queryAssetRiskRes ? (
                          <Col span={24}>
                            前置风控结果：
                            <span style={{ color: ['red','#52c41a','yellow','red'][item.queryAssetRiskRes] }}>
                              {item.queryAssetRiskRes == '-1' ? '交易不存在' : ['拒绝','通过','处理中','送审中','','','','','','未芝麻免押授权'][item.queryAssetRiskRes] || '暂未返回结果，请稍后刷新重试～'}
                            </span>
                          </Col>
                        ) : null}
                        <Col span={24}>
                          已结算金额：
                          <span style={{ color: 'DodgerBlue' }}>
                            {item.businessPaid}元
                          </span>
                        </Col>
                        {/* {['12'].includes(item.backstageUserOrderDto.status) ? */}
                        {/*   (<Col style={{ borderTop: "1px dashed #e8e8e8", paddingTop: "10px", textAlign: "right" }} */}
                        {/*         span={24}> */}
                        {/*     <Button className="button-green" size="small" */}
                        {/*             onClick={() => this.showOrderModal('remark', item.orderId)}>交易完成</Button> */}
                        {/*   </Col>) */}
                        {/*   : null */}
                        {/* } */}
                      </Col>
                    </Row>
                    <Row
                      style={{
                        backgroundColor: '#e8e8e8',
                        padding: '5px',
                        color: '#999',
                        fontSize: '12px'
                      }}
                    >
                      <Col span={12}>
                        <Row>
                          下单人姓名：{item.userOrderInfoDto.realName}
                          &emsp;
                          {(item.backstageUserOrderDto.platform && item.backstageUserOrderDto.platform!='default') && (
                            <Tag color="blue">
                             渠道:【{item.backstageUserOrderDto.platform}】
                            </Tag>
                          )}
                        </Row>
                        <Row>
                          下单人手机号：{item.userOrderInfoDto.telephone}
                        </Row>
                        <Row>下单人身份证：{item.userOrderInfoDto.idCard}</Row>
                        {/* <Row>
                          人脸认证：
                          <span
                            style={{
                              color: item.userOrderInfoDto.userFaceCertStatus
                                ? 'green'
                                : 'red'
                            }}
                          >
                            {' '}
                            {item.userOrderInfoDto.userFaceCertStatus
                              ? `已验证`
                              : `未通过`}{' '}
                          </span>
                        </Row> */}
                      </Col>
                      {/* <Col span={12}>
                        <Row>收货人姓名：{item.orderAddressDto.realname}</Row>
                        <Row>
                          收货人手机号：{item.orderAddressDto.telephone}
                        </Row>
                        <Row>
                          收货人地址：{item.orderAddressDto.provinceStr}
                          {item.orderAddressDto.cityStr}
                          {item.orderAddressDto.areaStr}
                          {item.orderAddressDto.street}
                        </Row>
                      </Col> */}
                    </Row>
                    {/* <Row
                      style={{
                        padding: '5px',
                        backgroundColor: 'lightgoldenrodyellow'
                      }}
                    >
                      <Col span={16}>
                    风控信息：综合评分 -【
                    <span
                      style={{ color: "red" }}>{item.userOrderInfoDto.score === '-1' ? '暂无评分' : `${item.userOrderInfoDto.score}分`}
                    </span>】
                  </Col>
                      <Col span={8}>
                        蚁盾分 -【
                        <span style={{ color: 'red' }}>
                          {item.userOrderInfoDto.antRiskScore < 0
                            ? '暂无评分'
                            : `${item.userOrderInfoDto.antRiskScore}分`}
                        </span>
                        】
                      </Col>
                    </Row> */}
                    <Row style={{ backgroundColor: '#e8e8e8', padding: '5px' }}>
                      <Col span={18}>
                        备注信息：
                        {item.orderRemarkDtoList.length > 0 ? (
                          <div>
                            {item.orderRemarkDtoList[0].createTime}
                            &emsp;备注内容：
                            <span style={{ borderBottom: '1px dashed #999' }}>
                              {item.orderRemarkDtoList[0].remark}
                            </span>
                            &emsp;备注人：
                            <span style={{ borderBottom: '1px dashed #999' }}>
                              {item.orderRemarkDtoList[0].userName}
                            </span>
                            &emsp;【
                            {item.orderRemarkDtoList[0].source === '02'
                              ? '商家备注'
                              : '平台备注'}
                            】
                          </div>
                        ) : (
                          '无'
                        )}
                      </Col>
                      <Col span={6} style={{ textAlign: 'right' }}>
                        <Button
                          size="small"
                          onClick={() =>
                            this.showRemarkListModal(
                              'remarkList',
                              item.orderRemarkDtoList
                            )
                          }
                        >
                          备注详情
                        </Button>
                        <Button
                          type="primary"
                          size="small"
                          onClick={() =>
                            this.showOrderModal('remark', item.orderId)
                          }
                        >
                          添加备注
                        </Button>
                      </Col>
                    </Row>
                    <Row
                      style={{
                        padding: '5px',
                        backgroundColor: 'lightgoldenrodyellow',
                        textAlign: 'center'
                      }}
                    >
                      <Col span={24}>
                        {/* <Button
                          className="button-color-green"
                          size="small"
                          onClick={() => this.showAntchainModal(item.orderId)}
                        >
                          蚂蚁链信息
                        </Button> */}
                        <Button
                          style={{
                            display:
                              item.userOrderInfoDto.insuranceStatus === 2
                                ? ''
                                : 'none'
                          }}
                          className="button-color-cyan"
                          size="small"
                          onClick={() => this.showInsuranceModal(item.orderId)}
                        >
                          投保信息
                        </Button>
                        <Button
                          className="button-color-purple"
                          size="small"
                          href={`#/Order/HomePage/Details?id=${item.orderId}`}
                          target="_blank"
                        >
                          订单详情
                        </Button>
                        <Button
                          style={{
                            display: [
                              '04',
                              '05',
                              '06',
                              '07',
                              '08',
                              '09'
                            ].includes(item.userOrderInfoDto.status)
                              ? ''
                              : 'none'
                          }}
                          className="button-color-volcano"
                          size="small"
                          onClick={() =>
                            this.showQuitLeaseOrderModal(item.orderId)
                          }
                        >
                          退租
                        </Button>
                        <Button
                          style={{
                            display: [
                              '04',
                              '05',
                              '06',
                              '07',
                              '08',
                              '09'
                            ].includes(item.userOrderInfoDto.status)
                              ? ''
                              : 'none'
                          }}
                          className="button-color-dust"
                          size="small"
                          onClick={() =>
                            this.showFinishedOrderModal(item.orderId)
                          }
                        >
                          完结订单
                        </Button>
                      </Col>
                    </Row>
                  </Row>
                  <Row
                    style={{
                      margin: '10px 0',
                      borderBottom: '2px dashed #c5c5c5'
                    }}
                  />
                </div>
              )
            })}
            <Row style={{ textAlign: 'center' }}>
              <Pagination
                total={allTotalExt}
                showTotal={total => `共 ${total} 条`}
                defaultPageSize={10}
                pageSizeOptions={['10', '50', '999']}
                showSizeChanger
                current={this.state.current}
                pageSize={this.state.pageSize}
                onChange={this.onPage}
                onShowSizeChange={this.onSizeChange}
              />
            </Row>
            {/* 订单列表 */}
            {/*<MyPageTable*/}
            {/*  scroll*/}
            {/*  onPage={this.onPage}*/}
            {/*  paginationProps={paginationProps}*/}
            {/*  dataSource={onTableData(allList)}*/}
            {/*  columns={this.columns}*/}
            {/*/>*/}
          </Spin>
        </Card>
      </PageHeaderWrapper>
    )
  }
}
